<template>
  <div :class="{'mobile-detail-wrap': showMobilePage}" class="seal-table">
    <Title v-if="showTitle" :is-show="false" :total="1" title="封账列表" style="flex: 1;padding: 0 24px;" />
    <el-tabs v-model="activeTabs" type="border-card" class="table-tab-content" @tab-click="handleTabClick">
      <el-tab-pane label="订单" class="order-tab-item">
        <orderTable
          ref="orderTableRef"
          :sealing-id="sealingId"
          :is-recheck="isRecheck"
          :is-report="isReport"
          :process-state="processState"
          :show-mobile-page="showMobilePage"
          @refreshData="refreshData"
        />
      </el-tab-pane>
      <el-tab-pane label="流水">
        <pipelineTable
          ref="pipelineTableRef"
          :sealing-id="sealingId"
          :is-report="isReport"
          :is-recheck="isRecheck"
          :process-state="processState"
          :show-mobile-page="showMobilePage"
          @refreshData="refreshData"
        />
      </el-tab-pane>
      <el-tab-pane label="核销记录">
        <sealRecordTable
          ref="sealRecordTableleRef"
          :sealing-id="sealingId"
          :is-report="isReport"
          :is-recheck="isRecheck"
          :process-state="processState"
          :show-mobile-page="showMobilePage"
          @refreshData="refreshData"
        />
      </el-tab-pane>
      <el-tab-pane label="成本">
        <costTable
          ref="costTableRef"
          :sealing-id="sealingId"
          :is-report="isReport"
          :is-recheck="isRecheck"
          :process-state="processState"
          :show-mobile-page="showMobilePage"
          @refreshData="refreshData"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import Title from '@/components/Title';
import orderTable from './orderTable';
import pipelineTable from './pipelineTable';
import sealRecordTable from './sealRecordTable';
import costTable from './costTable';
import { mapState } from 'vuex';
import { PROCESS_STATE } from '@/utils/const/sealing';
export default {
  name: 'SealTable',
  components: {
    Title,
    orderTable,
    pipelineTable,
    sealRecordTable,
    costTable },
  props: {
    sealingId: {
      type: Number,
      default: null
    },
    isRecheck: {
      type: Boolean,
      default: false
    },
    showTitle: {
      type: Boolean,
      default: true
    },
    isReport: { // false: 初审，复审；true：查看报告
      type: Boolean,
      default: false
    },
    processState: {
      type: Number | String,
      default: PROCESS_STATE.REVIEW
    }
  },
  data() {
    return {
      tabs: [
        { label: '订单', key: '0' },
        { label: '流水', key: '1' },
        { label: '核销记录', key: '2' },
        { label: '成本', key: '3' }
      ],
      activeTabs: '0'
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  created() {
    this.initData(true);
  },
  methods: {
    initData(reset) {
      this.activeTabs = this.$store.state.sealing.activeTabs;
      this.clearSelection();
      this.$nextTick(() => {
        switch (this.activeTabs) {
          case '0':
            if (reset) {
              this.$refs.orderTableRef.queryEmpty();
            } else {
              this.$refs.orderTableRef.getData();
            }
            break;
          case '1':
            if (reset) {
              this.$refs.pipelineTableRef.queryEmpty();
            } else {
              this.$refs.pipelineTableRef.getData();
            }
            break;
          case '2':
            if (reset) {
              this.$refs.sealRecordTableleRef.queryEmpty();
            } else {
              this.$refs.sealRecordTableleRef.getData();
            }
            break;
          case '3':
            if (reset) {
              this.$refs.costTableRef.queryEmpty();
            } else {
              this.$refs.costTableRef.getData();
            }
            break;
        }
      });
    },
    handleTabClick() {
      this.$store.commit('SET_ACTIVETABS', this.activeTabs);
      this.clearSelection();
      switch (this.activeTabs) {
        case '0':
          this.$refs.orderTableRef.queryEmpty();
          break;
        case '1':
          this.$refs.pipelineTableRef.queryEmpty();
          break;
        case '3':
          this.$refs.costTableRef.queryEmpty();
          break;
        default:
          this.$refs.sealRecordTableleRef.queryEmpty();
          break;
      }
    },
    clearSelection() {
      const refsArr = ['orderTableRef', 'pipelineTableRef', 'sealRecordTableleRef', 'costTableRef'];
      refsArr.forEach(i => {
        if (this.$refs[i] && this.$refs[i].clearMixinSelection) {
          this.$refs[i].clearMixinSelection();
        }
      });
    },
    refreshData() {
      this.$emit('refreshData');
    }
  }
};
</script>
<style lang="scss" scoped>
.seal-table {
  padding-bottom: 56px;
  .table-tab-content {
    border: none;
    box-shadow: none;
    position: relative;
    &::v-deep {
      .el-tabs__content {
        padding: 0 24px;
      }
      .el-tabs__header {
        padding: 4px;
        border-bottom: none;
        background: #F5F5F5;
        border-radius: 4px;
        width: 244px;
        display: flex;
        align-items: center;
        margin: 0 auto;
        justify-content: center;
        position: absolute;
        top: 12px;
        left: 24px;
        .el-tabs__nav-prev,.el-tabs__nav-next {
          height: 26px;
          line-height: 26px;
        }
        .el-tabs__nav {
          transition: none;
        }
        .el-tabs__item {
          text-align: center;
          font-size: 14px;
          font-weight: 500;
          color: #666666;
          transition: none;
          border: none;
          padding: 0 12px;
          height: 26px;
          line-height: 26px;
          position: relative;
          &::after {
            position: absolute;
            right: 0;
            top: 50%;
            width: 1px;
            height: 16px;
            margin-top: -8px;
            content: '';
            background-color: #aeb6c7;
          }
          &:last-child::after {
            display: none;
          }
        }
        .is-active {
          position: relative;
          border-radius: 4px;
          background: #fff;
          color: #406EFF;
          font-weight: bold;
          &::after {
            background-color: transparent;
          }
        }
      }
      .statistics {
        padding: 0 50px 0 10px;
      }
    }
  }
}
.mobile-detail-wrap {
  &.seal-table {
    ::v-deep .filter-form {
      margin-top: 60px !important;
      padding-left: 0;
    }
    // .table-tab-content {
    //   &::v-deep {
    //     .el-tabs__header {
    //       position: relative;
    //       top: 0;
    //       left: 0;
    //       margin: 16px 0 0 22px;
    //     }
    //   }
    // }
  }
  ::v-deep .mobile-export-wrap {
    position: relative;
    top: 0;
    left: 0;
    justify-content: space-between;
    &::v-deep {
      .mobile-icon {
        .text {
          display: none;
        }
      }
    }
    .btn-wrap {
      display: flex;
      align-items: center;
      .export-icon {
        width: 24px;
        height: 24px;
        cursor: pointer;
      }
    }
  }
}
</style>
<style lang="scss">
.seal-table {
  .filter-form {
    margin-top: 24px;
    padding-left: 260px;
  }
  .ellipsis {
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
}
</style>
